<template>
  <div class="container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">法律工具</h1>
      <p class="page-subtitle">专业法律工具，助您解决法律问题</p>
    </div>

    <!-- 两状服务 -->
    <div class="tools-section">
      <div class="section-title">诉讼工具</div>
      <div class="tools-grid">
        <div 
          class="tool-item" 
          v-for="(tool, index) in twoDocumentServiceItems" 
          :key="index"
          @click="navigateToTwoDocumentService(tool.path)"
        >
          <div class="tool-icon" :style="{ backgroundColor: tool.color }">
            <span class="icon-text">{{ tool.icon }}</span>
          </div>
          <div class="tool-text">{{ tool.title }}</div>
          <div class="tool-desc">专业诉状服务，高效便捷</div>
        </div>
      </div>
    </div>

    <!-- 工具分类 -->
    <div class="tools-section">
      <div class="section-title">常用工具</div>
      <div class="tools-grid">
        <div 
          class="tool-item" 
          v-for="(tool, index) in commonTools" 
          :key="index"
          @click="navigateToTool(tool.path)"
        >
          <div class="tool-icon" :style="{ backgroundColor: tool.color }">
            <span class="icon-text">{{ tool.icon }}</span>
          </div>
          <div class="tool-text">{{ tool.title }}</div>
          <div class="tool-desc">{{ tool.desc }}</div>
        </div>
      </div>
    </div>

    <!-- 专业工具 -->
    <div class="tools-section">
      <div class="section-title">专业工具</div>
      <div class="tools-grid">
        <div 
          class="tool-item" 
          v-for="(tool, index) in professionalTools" 
          :key="index"
          @click="navigateToTool(tool.path)"
        >
          <div class="tool-icon" :style="{ backgroundColor: tool.color }">
            <span class="icon-text">{{ tool.icon }}</span>
          </div>
          <div class="tool-text">{{ tool.title }}</div>
          <div class="tool-desc">{{ tool.desc }}</div>
        </div>
      </div>
    </div>

    <!-- 计算器工具 -->
    <div class="tools-section">
      <div class="section-title">计算器</div>
      <div class="tools-grid">
        <div 
          class="tool-item" 
          v-for="(tool, index) in calculatorTools" 
          :key="index"
          @click="navigateToTool(tool.path)"
        >
          <div class="tool-icon" :style="{ backgroundColor: tool.color }">
            <span class="icon-text">{{ tool.icon }}</span>
          </div>
          <div class="tool-text">{{ tool.title }}</div>
          <div class="tool-desc">{{ tool.desc }}</div>
        </div>
      </div>
    </div>

    <!-- 最近使用 -->
    <div class="tools-section" v-if="recentTools.length > 0">
      <div class="section-title">最近使用</div>
      <div class="tools-grid">
        <div 
          class="tool-item recent-tool" 
          v-for="(tool, index) in recentTools" 
          :key="index"
          @click="navigateToTool(tool.path)"
        >
          <div class="tool-icon" :style="{ backgroundColor: tool.color }">
            <span class="icon-text">{{ tool.icon }}</span>
          </div>
          <div class="tool-text">{{ tool.title }}</div>
          <div class="tool-desc">{{ tool.desc }}</div>
          <div class="recent-badge">最近</div>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <bottom-nav-h5
      :items="navItems"
      :current="navCurrentIndex"
      theme="blue"
      @change="handleNavChange"
    />
  </div>
</template>

<script>
import BottomNavH5 from '@/components/bottom-nav-h5/bottom-nav-h5.vue'
import routerManager from '../../utils/router.js'

export default {
  name: 'Tools',
  components: {
    BottomNavH5
  },
  data() {
    return {
      twoDocumentServiceItems: [
        {
          title: '诉状生成',
          icon: '✍️',
          color: '#4ECDC4',
          path: '/pages/tools/index?type=complaint-generate'
        },
        {
          title: '答辩状转换',
          icon: '🔄',
          color: '#45B7D1',
          path: '/pages/tools/index?type=defense-convert'
        },
        {
          title: '答辩状生成',
          icon: '📋',
          color: '#96CEB4',
          path: '/pages/tools/index?type=defense-generate'
        },
        {
          title: '模板下载',
          icon: '📄',
          color: '#FECA57',
          path: '/pages/tools/index?type=templates'
        },
        {
          title: '诉状转换',
          icon: '📝',
          color: '#FF6B35',
          path: '/pages/tools/index?type=complaint-convert'
        },
        {
          title: '历史文件列表',
          icon: '📁',
          color: '#6C5CE7',
          path: '/pages/history/index'
        }
      ],
      commonTools: [
        {
          title: '智能评估',
          desc: 'AI智能分析法律问题',
          icon: '🤖',
          color: '#0A2463',
          path: '/pages/solution-recommend/index'
        },
        {
          title: '找律师',
          desc: '专业律师推荐',
          icon: '⚖️',
          color: '#28a745',
          path: '/pages/solution-recommend/index'
        },
        {
          title: '法律咨询',
          desc: '在线法律咨询',
          icon: '💬',
          color: '#17a2b8',
          path: '/pages/solution-recommend/index'
        },
        {
          title: '进度追踪',
          desc: '案件进度查询',
          icon: '📊',
          color: '#6f42c1',
          path: '/pages/process-detail/index'
        }
      ],
      professionalTools: [
        {
          title: '合同审查',
          desc: '专业合同审查服务',
          icon: '📋',
          color: '#dc3545',
          path: '/pages/solution-recommend/index'
        },
        {
          title: '法律文书',
          desc: '各类法律文书模板',
          icon: '📄',
          color: '#fd7e14',
          path: '/pages/solution-recommend/index'
        },
        {
          title: '证据收集',
          desc: '证据收集指导',
          icon: '🔍',
          color: '#20c997',
          path: '/pages/solution-recommend/index'
        },
        {
          title: '诉讼指导',
          desc: '诉讼流程指导',
          icon: '⚔️',
          color: '#e83e8c',
          path: '/pages/solution-recommend/index'
        }
      ],
      calculatorTools: [
        {
          title: '赔偿计算',
          desc: '各类赔偿金额计算',
          icon: '💰',
          color: '#28a745',
          path: '/pages/solution-recommend/index'
        },
        {
          title: '利息计算',
          desc: '利息违约金计算',
          icon: '📈',
          color: '#ffc107',
          path: '/pages/solution-recommend/index'
        },
        {
          title: '诉讼费计算',
          desc: '诉讼费用计算器',
          icon: '🧮',
          color: '#6c757d',
          path: '/pages/solution-recommend/index'
        },
        {
          title: '时效计算',
          desc: '诉讼时效计算',
          icon: '⏰',
          color: '#17a2b8',
          path: '/pages/solution-recommend/index'
        }
      ],
      recentTools: [],
      // 底部导航数据
      navCurrentIndex: 1, // 当前在便民服务页面（索引：0首页，1便民服务，2我的）
      navItems: [
        {
          text: '首页',
          iconText: '🏠',
          pagePath: '/pages/index/index'
        },
        {
          text: '便民服务',
          iconText: '🛠️',
          pagePath: '/pages/tools/index'
        },
        {
          text: '我的',
          iconText: '👤',
          pagePath: '/pages/personal-center/index'
        }
      ]
    }
  },
  methods: {
    navigateToTwoDocumentService(path) {
      console.log('导航到两状服务:', path)
      // 添加到最近使用
      this.addToRecent(path)
      
      if (path.includes('/pages/history/index')) {
        // 跳转到历史文件页面
        uni.navigateTo({
          url: path
        })
      } else {
        // 其他两状服务功能
        uni.showToast({
          title: '两状服务功能开发中',
          icon: 'none'
        })
      }
    },
    navigateToTool(path) {
      console.log('导航到工具:', path)
      // 添加到最近使用
      this.addToRecent(path)
      
      if (path === '/pages/solution-recommend/index' || path === '/pages/process-detail/index') {
        // 跳转到已实现的页面
        uni.navigateTo({
          url: path
        })
      } else {
        uni.showToast({
          title: '工具功能开发中',
          icon: 'none'
        })
      }
    },
    addToRecent(path) {
      // 查找对应的工具信息
      const allTools = [...this.twoDocumentServiceItems, ...this.commonTools, ...this.professionalTools, ...this.calculatorTools]
      const tool = allTools.find(t => t.path === path)
      
      if (tool) {
        // 检查是否已存在
        const existingIndex = this.recentTools.findIndex(t => t.path === path)
        if (existingIndex !== -1) {
          // 移除已存在的，重新添加到顶部
          this.recentTools.splice(existingIndex, 1)
        }
        
        // 添加到最近使用列表顶部
        this.recentTools.unshift({ ...tool })
        
        // 限制最近使用数量为4个
        if (this.recentTools.length > 4) {
          this.recentTools = this.recentTools.slice(0, 4)
        }
        
        // 保存到本地存储
        uni.setStorageSync('recentTools', this.recentTools)
      }
    },
    loadRecentTools() {
      // 从本地存储加载最近使用的工具
      try {
        const saved = uni.getStorageSync('recentTools')
        if (saved) {
          this.recentTools = saved
        }
      } catch (e) {
        console.error('加载最近使用工具失败:', e)
      }
    },
    handleToolType(type) {
      console.log('处理工具类型:', type)
      switch(type) {
        case 'ai-consultation':
          // AI法律咨询功能
          uni.showModal({
            title: 'AI法律咨询',
            content: '欢迎使用AI法律咨询服务！请描述您遇到的法律问题，我将为您提供专业的法律建议。',
            confirmText: '开始咨询',
            cancelText: '返回',
            success: (res) => {
              if (res.confirm) {
                // 这里可以跳转到具体的AI咨询页面
                uni.showToast({
                  title: 'AI咨询功能开发中',
                  icon: 'none'
                })
              }
            }
          })
          break
        case 'complaint-generate':
          uni.showToast({
            title: '起诉状生成功能开发中',
            icon: 'none'
          })
          break
        case 'defense-convert':
          uni.showToast({
            title: '答辩状转换功能开发中',
            icon: 'none'
          })
          break
        case 'templates':
          uni.showToast({
            title: '模板下载功能开发中',
            icon: 'none'
          })
          break
        case 'contract-review':
          uni.showToast({
            title: '合同审查功能开发中',
            icon: 'none'
          })
          break
        case 'law-search':
          uni.showToast({
            title: '法条查询功能开发中',
            icon: 'none'
          })
          break
        case 'document-generate':
          uni.showToast({
            title: '文书生成功能开发中',
            icon: 'none'
          })
          break
        default:
          console.log('未知的工具类型:', type)
      }
    },
    // 底部导航切换
    handleNavChange(event) {
      console.log('便民服务页 - 底部导航切换:', event)
      this.navCurrentIndex = event.index
      const item = event.item // 直接使用事件传递的 item
      if (item.pagePath && item.pagePath !== '/pages/tools/index') {
        console.log('便民服务页 - 准备跳转到:', item.pagePath)
        this.navigateTo(item.pagePath)
      } else {
        console.log('便民服务页 - 当前页面，不跳转')
      }
    },
    
    navigateTo(path) {
      console.log('导航到:', path)
      if (path === '/pages/tools/index') {
        // 当前页面，不需要跳转
        return
      }
      
      // 底部导航的页面列表
      const tabPages = [
        '/pages/index/index',
        '/pages/tools/index',
        '/pages/personal-center/index'
      ]
      
      if (tabPages.includes(path)) {
        // 对于底部导航页面，使用 reLaunch 避免页面栈问题
        routerManager.reLaunch(path, {
          success: (res) => {
            console.log('页面跳转成功:', path)
          },
          fail: (err) => {
            console.error('页面跳转失败:', err)
            alert('页面跳转失败')
          }
        })
      } else {
        // 其他页面使用 navigateTo
        routerManager.navigateTo(path, {
          success: (res) => {
            console.log('页面跳转成功:', path)
          },
          fail: (err) => {
            console.error('页面跳转失败:', err)
            alert('页面跳转失败')
          }
        })
      }
    }
  },
  onLoad(options) {
    console.log('工具页面加载，参数:', options)
    // 处理页面参数
    if (options.type) {
      this.handleToolType(options.type)
    }
  },
  mounted() {
    console.log('工具页面加载完成')
    this.loadRecentTools()
  }
}
</script>

<style scoped>
/* 容器样式 */
.container {
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px; /* 为底部导航留出空间 */
}

.container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(10, 36, 99, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary, #1a202c);
  margin-bottom: 12px;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 16px;
  color: var(--text-secondary, #718096);
  line-height: 1.4;
}

/* 工具分类 */
.tools-section {
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
  margin-bottom: 20px;
  padding-left: 8px;
  position: relative;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #0A2463 0%, #FF6B35 100%);
  border-radius: 2px;
}

/* 工具网格 */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* 工具项 */
.tool-item {
  background: white;
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(10, 36, 99, 0.08);
  border: 1px solid rgba(10, 36, 99, 0.06);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.tool-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0A2463 0%, #FF6B35 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.tool-item:hover::before {
  transform: scaleX(1);
}

.tool-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(10, 36, 99, 0.15);
  border-color: rgba(10, 36, 99, 0.1);
}

.tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.tool-item:hover .tool-icon {
  transform: scale(1.1);
}

.icon-text {
  font-size: 22px;
}

.tool-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a202c);
  margin-bottom: 6px;
  line-height: 1.3;
}

.tool-desc {
  font-size: 12px;
  color: var(--text-secondary, #718096);
  line-height: 1.4;
}

/* 最近使用工具特殊样式 */
.recent-tool {
  position: relative;
}

.recent-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 16px;
  }
  
  .page-title {
    font-size: 28px;
  }
  
  .page-subtitle {
    font-size: 14px;
  }
  
  .section-title {
    font-size: 20px;
  }
  
  .tools-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  
  .tool-item {
    padding: 14px 10px;
  }
  
  .tool-icon {
    width: 40px;
    height: 40px;
  }
  
  .icon-text {
    font-size: 18px;
  }
  
  .tool-text {
    font-size: 12px;
  }
  
  .tool-desc {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .tool-item {
    padding: 12px 8px;
  }
  
  .tool-icon {
    width: 36px;
    height: 36px;
  }
  
  .icon-text {
    font-size: 16px;
  }
  
  .tool-text {
    font-size: 11px;
  }
  
  .tool-desc {
    font-size: 9px;
  }
}

/* 现代化动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.page-header {
  animation: fadeInUp 0.8s ease-out;
}

.tools-section:nth-child(2) {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.tools-section:nth-child(3) {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.tools-section:nth-child(4) {
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.tools-section:nth-child(5) {
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

/* 微交互效果 */
.tool-item:active {
  transform: translateY(-4px) scale(0.98);
}

/* 现代化滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #0A2463 0%, #FF6B35 100%);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #082A5A 0%, #E55A2B 100%);
}
</style>